<template>
  <div class="input-section-wrap">
    <el-input class="input-section-item" v-model.number="inputSection[0]" :type="sectionType" clearable @change="handleInput"></el-input>
    <span class="section-separator"> {{separator}} </span>
    <el-input class="input-section-item" v-model.number="inputSection[1]" :type="sectionType" clearable @change="handleInput"></el-input>
  </div>
</template>

<script>
export default {
  name:"InputSection",
  props: {
      value: {
          type: Array,
          default: ()=>[]
      },
      separator:{
        type: String,
        default: ' - '
      },
      sectionType:{
        type:String,
        default:"number"
      }
  },
  data() {
      return {
          inputSection: ["",""]
      }
  },
  watch: {
      value(nv){
        if(nv.length > 0){
          nv.forEach((val,i) => {
            this.inputSection[i] = val
          });
        }
      }
  },
  methods: {
    handleInput($event){
      if(this.sectionType == 'number'){
        const reg = /^\+?[1-9]\d*$/;
        if(reg.test($event)){
          this.$emit('input', this.inputSection);
        }else{
          this.$message(this.$t('app.inputGreaterZeroNumberPlease'))
        }
      }else{
        this.$emit('input', this.inputSection);
      }
    }
  }
}
</script>

<style lang="scss">
.input-section-wrap{
  overflow: hidden;
  margin: 0;
  li{
    display: inline-block;
  }
  .input-section-item{
    width: 74px;
  }
  .section-separator{
    padding: 0 0.5em;
  }
}
</style>